import React from 'react';
import { Card, Avatar, Typography, Space, Tag, Divider, Button, Progress } from 'antd';
import { UserOutlined, ShoppingCartOutlined, MessageOutlined, StarOutlined, DollarOutlined, ShieldOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { Title, Text } = Typography;

/**
 * 用户资料组件
 * 
 * 功能：
 * - 展示用户基本信息
 * - 显示用户统计数据
 * - 展示信任等级和评分
 * - 提供操作按钮
 * 
 * Props:
 * @param {Object} user - 用户数据对象
 * @param {boolean} isOwner - 当前用户是否为资料所有者
 * @param {Function} onContact - 联系按钮点击处理函数
 */
const UserProfile = ({ user, isOwner = false, onContact }) => {
  // 计算用户注册天数
  const calculateMemberDays = (createdAt) => {
    if (!createdAt) return 0;
    return dayjs().diff(dayjs(createdAt), 'day');
  };

  // 获取信任等级
  const getTrustLevel = (rating) => {
    if (rating >= 4.8) return { level: 'S', color: 'gold' };
    if (rating >= 4.5) return { level: 'A+', color: 'green' };
    if (rating >= 4.0) return { level: 'A', color: 'blue' };
    if (rating >= 3.5) return { level: 'B', color: 'orange' };
    return { level: 'C', color: 'red' };
  };

  const trustLevel = getTrustLevel(user?.rating || 0);

  // 用户统计数据
  const stats = [
    { label: '成功交易', value: user?.successful_trades || 0, icon: <ShoppingCartOutlined /> },
    { label: '回复率', value: `${user?.response_rate || 0}%`, icon: <MessageOutlined /> },
    { label: '好评率', value: `${user?.positive_rating || 0}%`, icon: <StarOutlined /> },
    { label: '信用积分', value: user?.credit_score || 0, icon: <ShieldOutlined /> }
  ];

  return (
    <Card className="user-profile-card">
      {/* 用户基本信息 */}
      <div className="user-basic-info">
        <Avatar 
          size={80} 
          icon={<UserOutlined />}
          className="user-avatar-large"
        />
        
        <div className="user-main-info">
          <div className="user-header">
            <Title level={4} className="user-name">
              {user?.username || '用户'}
            </Title>
            <Tag color={trustLevel.color} className="trust-level-tag">
              信任等级 {trustLevel.level}
            </Tag>
          </div>
          
          <div className="user-details">
            <Space size="small" className="user-meta">
              <Text type="secondary">
                注册时间：{dayjs(user?.created_at).format('YYYY-MM-DD')}
              </Text>
              <Text type="secondary">
                会员 {calculateMemberDays(user?.created_at)} 天
              </Text>
              <Text type="secondary">
                {user?.location || '未知位置'}
              </Text>
            </Space>
          </div>
          
          <div className="rating-overview">
            <Space align="center">
              <StarOutlined className="star-icon" />
              <Text strong className="overall-rating">
                {user?.rating || 0}
              </Text>
              <Progress 
                percent={user?.rating * 20} 
                strokeColor="#ffb800" 
                size="small" 
                className="rating-progress"
              />
              <Text type="secondary" className="rating-count">
                {user?.review_count || 0} 条评价
              </Text>
            </Space>
          </div>
        </div>
      </div>

      <Divider />

      {/* 用户统计 */}
      <div className="user-stats">
        {stats.map((stat, index) => (
          <div key={index} className="stat-item">
            <div className="stat-icon">{stat.icon}</div>
            <Text strong className="stat-value">{stat.value}</Text>
            <Text type="secondary" className="stat-label">{stat.label}</Text>
          </div>
        ))}
      </div>

      <Divider />

      {/* 个人简介 */}
      {user?.bio && (
        <div className="user-bio">
          <Title level={5} className="bio-title">个人简介</Title>
          <Text className="bio-content">{user.bio}</Text>
        </div>
      )}

      {/* 操作按钮 */}
      <div className="user-actions">
        {!isOwner && (
          <Space>
            <Button 
              type="primary" 
              icon={<MessageOutlined />}
              onClick={onContact}
            >
              联系TA
            </Button>
            <Button icon={<DollarOutlined />}>举报用户</Button>
          </Space>
        )}
        {isOwner && (
          <Button type="primary" block>编辑个人资料</Button>
        )}
      </div>
    </Card>
  );
};

export default UserProfile;
